/*
 * @Author: BM\DENG.RENYI 1787522251@qq.com
 * @Date: 2023-03-14 11:16:17
 * @LastEditors: BM\DENG.RENYI 1787522251@qq.com
 * @LastEditTime: 2023-03-24 14:03:40
 * @FilePath: \child-app-react\src\App.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useState, useEffect } from "react"
import { Select, Space } from 'antd';
// import WujieReact from "wujie-react";
// const { bus } = WujieReact;


function App() {
	const [inputData, setinputData] = useState('');
	const [mainPorpsData, setmainPorpsData] = useState('main传递的数据');
	const [vuePorpsData, setvuePorpsData] = useState('vue传递的数据');
	useEffect(() => {
		// console.log("window.parent.globalMainValue=>",window.parent.globalMainValue);

		window.$wujie?.bus.$on("getUserInfo", function (msg2) {
			// setname(msg2);
			console.log("react->msg2=>", msg2);
		});

		window.$wujie?.bus.$emit("reactGetVueData", reactGetVueData);

		window.$wujie?.bus.$emit("reactGetMainData", reactGetMainData);
	}, []);

	const reactGetVueData = (val) => {
		setvuePorpsData(val);
	};

	const reactGetMainData = (val) => {
		setmainPorpsData(val);
	};

	const handleChange = (value) => {
		console.log(`selected ${value}`);
	};

	return (
		<div className="App">
			<header style={{
				width: '100%',
				height: '800px',
			}}>
				<div style={{
					width: '100%',
					height: '400px',
					padding: '16px',
					display: 'flex'
				}}>
					<div style={{
						width: '30%',
					}}>
						<p>react子应用传递数据：</p>
						<input type="text" onChange={(val) => {
							setinputData(val.target.value);
						}} />
						<button onClick={() => {
							window.$wujie.bus.$on('vueGetReactData', (vueGetReactData) => {
								vueGetReactData(inputData);
							});
							window.$wujie.bus.$on('mainGetReactData', (mainGetReactData) => {
								mainGetReactData(inputData);
							});
						}}>发送</button>
					</div>
					<div>
						<p>react子应用接收数据：</p>
						<p>主应用传递的数据:{mainPorpsData}</p>
						<p>vue传递的数据:{vuePorpsData}</p>
					</div>
				</div>
				<Space wrap>
					<Select
						defaultValue="lucy"
						style={{
							width: 120,
						}}
						onChange={handleChange}
						options={[
							{
								value: 'jack',
								label: 'Jack',
							},
							{
								value: 'lucy',
								label: 'Lucy',
							},
							{
								value: 'Yiminghe',
								label: 'yiminghe',
							},
							{
								value: 'disabled',
								label: 'Disabled',
								disabled: true,
							},
						]}
					/>
					<Select
						showSearch
						style={{ width: 200 }}
						placeholder="Search to Select"
						optionFilterProp="children"
						filterOption={(input, option) => (option?.label ?? '').includes(input)}
						filterSort={(optionA, optionB) =>
							(optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
						}
						options={[
							{
								value: '1',
								label: 'Not Identified',
							},
							{
								value: '2',
								label: 'Closed',
							},
							{
								value: '3',
								label: 'Communicated',
							},
							{
								value: '4',
								label: 'Identified',
							},
							{
								value: '5',
								label: 'Resolved',
							},
							{
								value: '6',
								label: 'Cancelled',
							},
						]}
					/>
				</Space>
			</header>
		</div>
	);
}

export default App;
